<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 
        盒模型 重点
            由4部分组成
                content 内容(文字 图片)
                border 边框---会把盒子撑大
                margin 外边的间距（外间距）
               padding 里面的间距（内间距也叫泡沫）---会把盒子撑大


               padding 泡沫（里面的间距）主要是用来调整内容和盒子之间的间距的
                      属性值为一个值表示的是四边 padding:10px;
                      属性值为两个值表示的是上下 左右 padding:10px 30px;
                      属性值为三个值表示的是 上  左右  下
                      属性值为四个值表示的是 上 右  下 左 （顺时）
     
                width(不变)= width-左右的padding-左右的border
                height（不变）= height-上下的padding-上下的border

                单独方向
                    padding-left：数值
                    padding-right:数值
                    padding-bottom:数值
                    padding-top:数值

                可以加给父元素，也可以加给子元素

             -->
     <style>
         .box{
             width:300px;height:300px; border:solid 3px #000;
             background: pink;          
             /* padding:10px 30px 50px 80px;   */
            
         }
         .box h2{
             width:250px;
            padding-left:50px;
            height:40px;
            background: yellow;
            /* 250px+50px */
         }
         .box p{
            padding-left:50px;
         }
     </style>
</head>
<body>
   <div class="box">
        <!-- 你好 -->
        <h2>新闻咨询</h2>
        <p>你好美丽啊今天不约你好美丽啊今天不约</p>
   </div>

</body>
</html>